<!DOCTYPE html>
<html lang="zh"
      xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html"
>
<head>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all"/>
<body class="childrenBody">
<blockquote class="layui-elem-quote quoteBox layui-quote-top">
    <form class="layui-form" id="queryDeviceData">
        <div class="queryTable">
            <th th:text="${dataName}"></th>
<!--            参数名称：-->
<!--            <div class="layui-inline">-->
<!--                <select id="dataName" name="dataName">-->
<!--                    <option value="" selected>请选择</option>-->
<!--                </select>-->
<!--            </div>-->

<!--            <input type="hidden" name="queryFlag" id="queryFlag" value="true"/>-->
<!--            <button class="layui-btn" lay-submit lay-filter="search" id="query">查询</button>-->
        </div>
    </form>
</blockquote>
<table class="layui-table" id="deviceData" lay-filter="deviceData"></table>
</body>
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" >
    layui.config({
        base: "/js/modules/"
    }).extend({
        "listView": "listView"
    });
    layui.use(['form', 'listView', 'jquery', 'common', 'table'], function () {
        let form = layui.form,
            common = layui.common,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$;

            layui.listView.tableInit({
                id: 'deviceData',
                url: 'qyeryDeviceInfo?dataName=[[${dataName}]]',
                page: true,
                cols: [
                    {field: 'number', title: '序号', fixed: 'true', type: 'numbers'},
                    {field: 'name', title: '设备名称'},
                    {field: 'no', title: '设备编号'},
                    {field: 'typeName',title:'设备类型'},
                    {field: 'location', title: '设备位置'}
                ]
            });

        //监听行单击事件（双击事件为：rowDouble）
        table.on('row(deviceData)', function(obj){
            var data = obj.data;
            layer.open({
                type: 2 //此处以iframe举例
                // ,title: ''
                ,area: ['80%', '80%']
                ,shade: 0.6
                ,maxmin: true
                ,content: 'realDataPage?name='+data.name+"&no="+data.no+"&typeName="+data.typeName+"&location="+data.location+"&dataName=[[${dataName}]]"
                ,zIndex: layer.zIndex //重点1
                ,success: function(layero){
                    layer.setTop(layero); //重点2
                }
            });
            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });


    });

</script>
</html>
